<template>
  <view>
    <view class="container" v-if="isShow">
      <!-- 标题 -->
      <!-- 状态栏占位 -->
      <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

      <!-- 导航栏主体 -->
      <view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
        <!-- 左侧返回按钮 -->
        <image style="height: 30rpx; width: 30rpx;" src="/static/images/ic_back.png" @click="handleBack">
        </image>

        <!-- 中间标题 -->
        <text class="title">我要提现</text>
      </view>

      <!-- 提现方式 -->
      <view class="section" style="margin-top: 20rpx;">
        <text class="label">提现方式</text>
        <view class="section-right">
          <image :src="withType[currentTypeIndex].icon" style="height: 32rpx; width: 32rpx; margin-right: 12rpx;"></image>
          <text class="label" style="margin-right: 8rpx;">{{withType[currentTypeIndex].label}}</text>
          <image src="/static/images/ic_suggest.png" style="height: 28rpx; width: 70rpx; margin-right: 8rpx;"
                 v-if="withType[currentTypeIndex].isSuggest" />
          <image src="../../static/images/arrow_right.png" style="height: 27rpx; width: 15rpx;"></image>
        </view>
      </view>

      <!-- 提现账号 -->
      <view class="section" @click="navToAccount">
        <text class="label">提现账号</text>
        <view class="section-right">
          <text class="label" style="margin-right: 8rpx;"
                :style="{color: account.length ? '#000' : '#4D7EF4'}">{{ account.length ? account[currentAccountIndex].account : '立即去添加' }}</text>
          <image src="../../static/images/arrow_right.png" style="height: 27rpx; width: 15rpx;"></image>
        </view>
      </view>

      <!-- 提现金额 -->
      <view class="withdraw-container">
        <view class="withdraw-header" style="margin-bottom: 60rpx;">
          <text class="label">提现金额</text>
          <text style="font-size: 20rpx; color: rgba(0, 0, 0, 0.40);"></text>
        </view>
        <view
            style="display: flex; align-items: center; padding-bottom: 14rpx; border-bottom: rgba(0, 0, 0, 0.09) solid 2rpx;">
          <text style="font-size: 40rpx; font-weight: bold; color: black; margin-right: 26rpx;">￥</text>
          <input class="amount-input" v-model="amount" type="digit" :placeholder="'可提现金额' + balance"
                 @input="filterAmount" placeholder-class="ph-style" />
          <text class="all-withdraw" @click="setMaxAmount">全部提现</text>
        </view>
        <view class="rules">
          <text>{{withType[currentTypeIndex].tip}}</text>
        </view>
      </view>

      <!-- 交易密码 -->
      <view class="pass-container">
        <view class="pass-header">
          <text class="label" style="font-weight: bold;">交易密码</text>
          <text class="forget" @click="navToForget">忘记交易密码</text>
        </view>
        <view class="pass-input">
          <input v-model="password" password type="text" placeholder="请输入交易密码" placeholder-class="ph-style" style="background: #F0F0F0;" />
        </view>
      </view>

      <!-- 提现按钮 -->
      <view class="btn-wrapper">
        <view :class="['submit-btn', !canSubmit && 'disabled']" @click="handleSubmit">立即提现</view>
        <view style="margin-top: 20rpx; display: flex; justify-content: center; align-items: center" @click="toWithdraHelp()">
          <text style="color: #4D7EF4; font-size: 28rpx;">提现帮助</text>
          <image src="../../static/images/arrow_right_blue.png" style="height: 27rpx; width: 27rpx;"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  computed: {
    // 提交按钮状态
    canSubmit() {
      return this.amount > 0 && this.password.length >= 6
    }
  },
  onShow() {
    this.getWithType();
    this.balance = this.$app.getCanWithdrawBalance()
  },
  created() {
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync()
    //获取状态栏高度
    this.statusBarHeight = systemInfo.statusBarHeight

    // 微信小程序适配
    // #ifdef MP-WEIXIN
    const menuRect = uni.getMenuButtonBoundingClientRect()
    this.navBarHeight = (menuRect.top - systemInfo.statusBarHeight) * 2 + menuRect.height
    this.rightSafeArea = systemInfo.windowWidth - menuRect.left // 计算右侧避让距离[6](@ref)
    // #endif
  },
  data() {
    return {
      withType: [],
      currentTypeIndex: 0, //当前提现方式
      currentAccountIndex: 0, //当前提现账户
      accId: '', //账户id
      account: [], // 是否绑定账号
      balance: 0, // 可提现金额
      amount: '', // 提现金额
      password: '', // 交易密码
      statusBarHeight: 20, // 默认状态栏高度
      navBarHeight: 44, // 默认导航栏高度
      isShow: uni.getStorageSync("isShow"),
    };
  },
  methods: {
    // 获取提现方式
    async getWithType() {
      try {
        const res = await this.$http({
          method: 'GET',
          url: '/withdrawal/type'
        });
        console.log(res)
        this.withType = res.data

        this.getWithAccount();
      } catch (error) {
        //TODO handle the exception
        console.log(error)
      }
    },
    // 获取提现账号
    async getWithAccount() {
      try {
        const res = await this.$http({
          method: 'GET',
          url: '/user/account/list',
          data: {
            accType: this.withType[this.currentTypeIndex].value
          }
        });
        console.log(res)
        this.account = res.data
      } catch (error) {
        //TODO handle the exception
        console.log(error)
      }
    },
    // 金额输入过滤
    filterAmount(e) {
      this.amount = e.detail.value
          .replace(/[^\d.]/g, '') // 过滤非数字和小数点
          .replace(/^\./g, '') // 禁止第一个字符是小数点
          .replace(/(\.\d{0,2}).*/g, '$1') // 限制两位小数
    },
    // 设置最大金额
    setMaxAmount() {
      if (this.balance > 0) this.amount = this.balance
    },

    // 提交提现
    async handleSubmit() {
      if (!this.validate()) return

      // 这里添加提现接口调用逻辑
      uni.showLoading({
        title: '提交中...'
      })

      const res = await this.$http({
        method: 'POST',
        url: '/user/account/withdrawal',
        data: {
          accId: this.account[this.currentAccountIndex].accId,
          accType: 1,
          amount: this.amount,
          fundPwd: this.password
        }
      });

      if (res) {
        uni.showToast({
          title: '提现成功'
        })
        uni.navigateBack()
      }

    },
    // 表单验证
    validate() {
      if (!this.amount) {
        uni.showToast({
          title: '请输入提现金额',
          icon: 'none'
        })
        return false
      }
      if (parseFloat(this.amount) < 1) {
        uni.showToast({
          title: '最低提现1元',
          icon: 'none'
        })
        return false
      }
      if (parseFloat(this.amount) > 50000) {
        uni.showToast({
          title: '单笔最高5万元',
          icon: 'none'
        })
        return false
      }
      if (parseFloat(this.amount) > this.balance) {
        uni.showToast({
          title: '余额不足',
          icon: 'none'
        })
        return false
      }
      if (!this.password) {
        uni.showToast({
          title: '请输入交易密码',
          icon: 'none'
        })
        return false
      }
      return true
    },
    // 跳转账号绑定
    navToAccount() {
      if (this.account.length === 0) {
        uni.navigateTo({
          url: '/pages/account/account'
        })
      }
    },
    // 忘记密码
    navToForget() {
      uni.navigateTo({
        url: '/pages/find-fund-password/find-fund-password'
      })
    },
    handleBack() {
      uni.navigateBack();
    },
    toWithdraHelp() {
      this.$app.openUrl("https://file.huishouka.com.cn/html/1751875630526.html", false)
    }
  }
}
</script>

<style lang="scss">
.ph-style {
  color: rgba(0, 0, 0, 0.40);
}

.container {
  padding: 38rpx;
}

/* 状态栏占位 */
.status-bar {
  width: 100%;
  background-color: #FFFFFF; //与导航栏同色
}

/* 标题样式 */
.title {
  font-size: 28rpx;
  color: #000;
  font-weight: 500;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* 导航栏主体 */
.nav-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #FFFFFF;
  position: relative;
}

.section {
  padding: 24rpx 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2rpx solid rgba(0, 0, 0, 0.09);

  .section-right {
    display: flex;
    align-items: center;
  }
}

.label {
  font-size: 28rpx;
  color: #000;
}

.withdraw-container {
  padding-top: 46rpx;

  .withdraw-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .amount-input {
    font-size: 28rpx;
    color: #000;
    flex: 1;
  }

  .all-withdraw {
    color: #4D7EF4;
    font-size: 28rpx;
    margin-left: 20rpx;
  }

  .rules {
    margin-top: 22rpx;
    background-color: #F6F6F6;
    padding: 28rpx;
    color: #FC712A;
    font-size: 20rpx;
  }
}

.pass-container {
  margin-top: 48rpx;
  padding-top: 28rpx;

  .pass-header {
    display: flex;
    justify-content: space-between;
  }

  .pass-input {
    margin-top: 36rpx;
    padding: 24rpx 32rpx;
    background-color: #F0F0F0;
    font-size: 32rpx;
  }

  .forget {
    color: #4D7EF4;
    font-size: 28rpx;
    margin-left: 20rpx;
  }
}


.btn-wrapper {
  padding: 40rpx 0;

  .submit-btn {
    background-color: #4D7EF4;
    color: #fff;
    border-radius: 8rpx;
    font-size: 28rpx;
    text-align: center;
    padding: 18rpx 0;

    &.disabled {
      background-color: #B7D3FF;
    }
  }
}
</style>